<template>
	<view class="box">
		<u-navbar title="评论列表" bgColor="transparent" leftIcon=" ">
		</u-navbar>
		<view class="top">
			<!-- 	<view class="nav">
				<view class="nav-item">
					综合
				</view>
				<view class="nav-item">
					最新
				</view>
				<view class="nav-item active">
					图片(412)
				</view>
			</view> -->
			<view class="nav-tag">
				<view class="tag" :class="{'hide':ismore}">
					<view class="li" v-for="item in hiddenReviewList" :key="item.id" @click.stop="getCommentList(true,item.id)">
						{{item.name}}
					</view>
				</view>
				<view class="more">
					<u--text :text="ismore?'更多':'收起'" size="26rpx" :suffixIcon="ismore?'arrow-down-fill':'arrow-up-fill'"
						@click="ismore=!ismore"></u--text>
				</view>
			</view>
		</view>

		<view class="content">
			<view class="nav_title">
				<view class="title" v-for="item in nav_list" :key="item.id" @click="changeComment(item.id)">
					{{item.name}}
					<view v-show="item.id === commentType" class="xian">
					</view>
				</view>
			</view>

			<view class="li-box">
				<view class="li" v-for="item in review_list" :key="item.id">
					<view class="hede">
						<image :src="item.head_pic" mode="aspectFit" :lazy-load="true"></image>
						<view class="c">
							<view class="t">
								<view class="name">
									{{item.username}}
								</view>
								<view class="biaoji">
									文档打印
								</view>
							</view>
							<view class="b">
								<view class="fenshu">
									<u-rate :value="item.goods_rank" minCount="0.5" activeColor="#fb8a08" :allowHalf="true"
										readonly></u-rate>
								</view>
								<view class="date">
									{{item.add_time}}
								</view>
							</view>
						</view>
					</view>
					<view v-if="item.tags_name" class="tags">
						<view class="tag-li" v-for="(tagItem, tagIndex) in item.tags_name.split(',')" :key="tagIndex">
							{{tagItem}}
						</view>
					</view>
					<view class="text" :class="{'fourline-hide':istext}">
						{{item.content}}
					</view>
					<view class="img-box">
						<u-album :urls="item.img" space="15rpx" multipleSize="199rpx"></u-album>
					</view>
					<view class="uicon">
						<u-icon align="right" color="#f88d47" size="23rpx" labelSize="24rpx" name="thumb-up-fill"
							:label="item.zan_num" @click="() => handleLike(item)"></u-icon>
					</view>
				</view>
				<view v-if="!review_list.length" class="empty">
					<u-empty mode="list" text="评论为空" :textSize="28" :width="320" :height="320" />
				</view>
			</view>
		</view>

		<Loading v-if="false" />
	</view>
</template>

<script>
	import {
		CommentApi
	} from '@/api';
	import Loading from '@/components/Loading.vue'

	export default {
		components: {
			Loading
		},
		data() {
			return {
				ismore: true,
				istext: true,
				review_tag_list: [], //标签列表
				commentType: 1, //1 全部 2好评 3 中评 4差评
				review_list: [], //评论列表
				nav_list: [{
						name: '全部',
						id: 1
					},
					{
						name: '好评',
						id: 2
					},
					{
						name: '中评',
						id: 3
					},
					{
						name: '差评',
						id: 4
					}
				],
			}
		},
		computed: {
			hiddenReviewList() {
				return this.ismore ? this.review_tag_list.slice(0, 5) : this.review_tag_list
			}
		},
		onShow() {
			this.initData()
		},
		onReachBottom() {
			// this.getCommentList(this.commentType, true)
		},
		methods: {
			async initData(tagId = 0) {
				try {
					if (!this.review_tag_list.length) {
						const res = await CommentApi.getCommentTagsList({
							p: 1,
							size: 999
						})
						this.review_tag_list = res.result.rows
					}
					await this.getCommentList()
				} catch (err) {
					console.log('initData err', err);
				}
			},
			/**
			 * 获取评价列表
			 * @param {Number} tagId 标签ID
			 * @param {Boolean} init 是否初始化
			 */
			async getCommentList(init = true, tagId = 0) {
				try {
					if (init) {
						this.review_list = []
					}
					let form = {
						commentType: this.commentType
					}
					if (tagId) form.tag_id = tagId
					const res = await CommentApi.TrueGoodsComment(form)
					this.review_list = this.review_list.concat(res.commentList)
					return Promise.resolve(res)
				} catch (err) {
					console.log('getCommentList err= ', err);
					return Promise.reject(err)
				}
			},
			// 点赞
			handleLike(data) {
				this.$showLoading()
				CommentApi.userZan({
						comment_id: data.comment_id
					})
					.then(res => {
						this.$set(data, 'zan_num', data.zan_num += 1)
						uni.hideLoading()
						this.$showToast(res.msg || '点赞成功')
					})
					.catch(err => {
						uni.hideLoading()
						this.$showToast(err || '点赞失败')
					})
			},
			changeComment(commentId) {
				this.commentType = commentId
				this.getCommentList(true)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.empty {
		padding: 290rpx 0;

		::v-deep .u-icon__icon {
			font-size: 180rpx !important;
		}
	}

	.content {
		width: 100vw;
		margin-top: 30rpx;
		height: 1187rpx;
		border-radius: 20rpx 20rpx 0 0;
		opacity: 1;
		background: linear-gradient(180deg, #ffebd3 0%, #ffffff 100%);
		padding: 30rpx;
		box-sizing: border-box;

		.nav_title {
			display: flex;
			align-items: center;
		}

		.title {
			font-size: 30rpx;
			font-weight: 400;
			position: relative;
			margin-bottom: 50rpx;
			text-align: center;
			width: 60rpx;
			margin-right: 20rpx;

			.xian {
				position: absolute;
				left: 50%;
				bottom: -20rpx;
				transform: translateX(-50%);
				width: 42rpx;
				height: 8rpx;
				border-radius: 50rpx;
				opacity: 1;
				background: #fb8b07;
			}
		}

		.li-box {
			background-color: #fff;
			width: 690rpx;
			box-sizing: border-box;
			padding: 30rpx;


			.li {
				margin-bottom: 20rpx;

				.img-box {
					margin: 30rpx 0;
				}

				.uicon {
					width: 100%;
					text-align: right;
					display: flex;
					justify-content: flex-end;
				}

				.tags {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					margin-top: 36rpx;

					.tag-li {
						height: 51rpx;
						border-radius: 50rpx;
						opacity: 1;
						background: #ff8b38;
						line-height: 51rpx;
						text-align: center;
						font-size: 24rpx;
						font-weight: 400;
						color: #fff;
						margin-bottom: 16rpx;
						padding: 0 20rpx;
						box-sizing: border-box;
						margin-right: 15rpx;
					}
				}

				.text {
					font-size: 26rpx;
					font-weight: 400;
				}


				.hede {
					display: flex;
					align-items: center;

					image {
						width: 89rpx;
						height: 89rpx;
						border-radius: 50%;
					}

					.c {
						flex: 1;
						margin-left: 18rpx;

						.t {
							display: flex;
							align-items: center;
							margin-bottom: 18rpx;

							.name {
								font-size: 30rpx;
								font-weight: 400;
								margin-right: 10rpx;
							}

							.biaoji {
								width: 116rpx;
								height: 38rpx;
								border-radius: 5rpx;
								opacity: 1;
								background: #ffe2cb;
								color: #fb8b07;
								text-align: center;
								font-size: 24rpx;
								font-weight: 400;
							}
						}

						.b {
							display: flex;
							align-items: center;
							justify-content: space-between;
							width: 100%;

							.date {
								font-size: 26rpx;
								font-weight: 400;
							}
						}
					}
				}
			}
		}
	}

	.top {
		width: 100vw;
		// height: 407rpx;
		box-sizing: border-box;
		opacity: 1;
		background: radial-gradient(75.3% 116.1% at 19.6% 31.2%, #feeadb 0%, #fef2e7 20%, #fffcf7 52%, #ffffff 100%);
		box-shadow: 0 0 20px 0 #e5e5e529;
		padding: 30rpx;
		padding-top: 193rpx;

		.nav {
			display: flex;
			align-items: center;

			.nav-item {
				margin-left: 40rpx;
				color: #686868;
				font-size: 30rpx;
				transition: all 0.3s;

				&:first-child {
					margin-left: 0 !important;
				}
			}

			.active {
				margin-left: 86rpx;
				font-size: 34rpx;
			}
		}

		.nav-tag {
			display: flex;
			align-items: flex-end;

			.more {
				width: 90rpx;
			}

			.hide {
				overflow: hidden !important;
				height: 128rpx !important;
			}

			.tag {
				margin-top: 5rpx;
				flex: 1;
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.li {
					height: 51rpx;
					line-height: 51rpx;
					border-radius: 50rpx;
					opacity: 1;
					font-size: 24rpx;
					padding: 0 15rpx;
					background: #ffe3ce;
					margin-top: 15rpx;
					margin-right: 15rpx;
				}
			}
		}

	}
</style>